<template>
  <div class="clipboard-content">
    <template v-if="props.item.type === 'text'">
      <span class="text-content">{{ props.item.content }}</span>
    </template>
    
    <template v-else-if="props.item.type === 'image'">
      <el-image
        :src="props.item.content"
        :preview-src-list="[props.item.content]"
        fit="contain"
        class="image-content"
      />
    </template>
    
    <template v-else-if="props.item.type === 'file'">
      <el-tag>
        <el-icon><Document /></el-icon>
        <span>{{ getFileName(props.item.content) }}</span>
      </el-tag>
    </template>
  </div>
</template>

<script setup lang="ts">
import { Document } from '@element-plus/icons-vue'
import type { CustomClipboardItem } from '../types/clipboard'

const props = defineProps<{
  item: CustomClipboardItem
}>()

const getFileName = (content: string | Buffer) => {
  if (typeof content === 'string') {
    return content.split('\\').pop() || content
  }
  return '文件'
}
</script>

<style scoped>
.clipboard-content {
  max-width: 100%;
  overflow: hidden;
}

.text-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
  display: inline-block;
}

.image-content {
  max-height: 50px;
  max-width: 100px;
  object-fit: contain;
}
</style> 